<template>
	<view class="passage_reading_box">
		<view>
			<view class="article-eng-title">{{articleData.title}}</view>
			<view class="article-title">{{articleData.title}}</view>
			<!-- <view class="article-direction">
				<view>
					<uni-tag style="margin-right: 10rpx;" v-for="(item,index) in articleData.direction.split('/')" :key="index" :text="item" circle inverted/>
				</view>
				<view style="color: #798494;">{{articleData.count}}词</view>
			</view> -->
			
			<view style="margin-top: 40rpx;">
				<image src="/static/images/a1.jpg" style="width: 100%;border-radius: 20rpx;height: 320rpx;"></image>
			</view>
			<view style="width: 80%;margin: 20rpx auto;">
				<view style="display: flex;align-items: center;justify-content: center;" class="watch-word">
					<image src="/static/images/point.png" style="width: 50rpx;height: 50rpx;"></image>
					<view >点击查询生词</view>
				</view>
			</view>
			<!-- {{articleData.content}} -->
			<view class="article-content">
				 
				<text @click="showMean(item)" class="one-word" v-for="(item,index) in articleData.content.split(/\s+/)" :key="index">{{item}}</text>
			
			</view>
			
		</view>
		<!-- <view style="width: 50%;margin: 20rpx auto;">
			<button style="border-radius: 30rpx;backgroundColor:#0000FF;" @tap="goToPage()" type="primary">开始拼读</button>
		</view> -->
		<uni-popup ref="popup" type="bottom" border-radius="60px 60px 0 0">
			<view class="pop-view">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view class="pop-word">{{selectWord.replace(/[,?.;]$/, '')}}</view>
						<view style="color: #999B9B;margin-left: 15rpx;">{{wordInfo.pronunciation}}</view>
					</view>
					<uni-icons type="sound-filled" color="#61B7E3" size="24"></uni-icons>
				</view>
				<view style="color: #333333;">{{wordInfo.translation}}</view>
				<view style="width: 40%;color: #1E98D7;margin: 40rpx auto;">
					<button class="sc-btn"><text style="margin-right: 15rpx;">+</text>加入生词本</button>
				</view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	
import { getArticle,transWords } from '@/api/homes/plan/plan.js'
	export default {
		data() {
			return {
				state: {
					id: '',
					type: ''
				},
				wordList:[],
				// articleData: {

				// 	"englishTitle": "The Joy of Helping Others",
				// 	"chineseTitle": "帮助他人的喜悦",
				// 	"direction": "四级/友情/正能量",
				// 	"content": `One afternoon, I was walking through the park when I saw a group of children playing.
				// 	They were laughing and having so much fun that it made me smile too. Suddenly, one little girl fell down and started crying. Without thinking twice, I ran to her and asked if she was okay. She nodded but still looked afraid and in pain.
				// 	I helped her up gently and dusted off her clothes while the other children gathered around us, concerned for their friend’s well-being. The little girl soon calmed down with my comforting words and the support from her friends. Before long, she even forgot about her fall as we all started playing together again.
				// 	Later that day, when the sun was setting behind the trees, casting beautiful golden light across the park, I said goodbye to those delightful children with a heart full of gratitude. It wasn't just because they had shared their laughter and games with me; it was because helping them brought out a deep sense of joy within myself.
				// 	This experience taught me how rewarding it can be to lend someone a hand—whether it's picking up something heavy or offering emotional support during tough times. We often forget that simple acts like these not only make others feel better but also enhance our own happiness levels significantly by making us more connected human beings.`,
				// },
				articleData:{},
				wordsInfoList:[],
				bookId:'',
				selectWord:'',
				wordInfo:{},
				
				// art:{},
			}
		},
		onLoad(options) {
			console.log(options);
			this.articleData = JSON.parse(options.data)
			console.log("ddd",this.articleData);
			
		},
		methods: {
			open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('bottom')
			 },
			showMean(id){
				 this.$refs.popup.open('bottom')
				 this.selectWord = id
				// alert(id)
				transWords(id).then(res=>{
				//	console.log("ddddddddddddd",res);
					if (res.code == 200) {
						this.wordInfo = res.data
					}
					
				})
			},
			goToPage() {
				uni.navigateTo({
					url: '/pages/homes/spelling/spelling'
				})
			},
			async showArticle() {
				await getArticle(this.bookId,20).then(res=>{
					if(res.code == 200) {
						this.articleData = res.data.articleVO
						this.wordList = res.data.words.split(", ")
						this.wordsInfoList = res.data.wordsList
						uni.setStorageSync('wordsInfoList', this.wordsInfoList)
					}
					// console.log(res);
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.passage_reading_box {
		// height: 100vh;
		// background: $uni-bg-color-page;
		padding: 20rpx;
	}
	page {
		background: $uni-bg-color-page;
	}
	.article-eng-title{
		font-weight: bold;
		font-size: 48rpx;
		color: #040404;
	}
	.article-title {
		margin-top: 20rpx;
		color: #333333;
		font-size: 38rpx;
	}
	.article-direction {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		margin-right: 40rpx;
	}
	.article-content{
		padding: 10rpx;
		
		// width: 90%;
		margin-top: 20rpx;
		// border: 2rpx solid red;
	}
	.one-word{
		/* border: 2rpx solid red; */
		margin-left: 10rpx;
		white-space: normal; /* 确保文本在容器内自动换行 */
		word-wrap: break-word; /* 处理长单词的换行 */
		/* box-sizing: border-box; */
		display: inline-block;
	}
	.watch-word{
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #E7EBF1;
		border-radius: 20rpx;
		color: #9FA1A5;
		font-size: 40rpx;
	}
	.pop-view {
		height: 450rpx;
		background-color: #ffffff;
		padding: 30rpx;
		padding-top: 50rpx;
		border-radius: 10rpx;
	}
	.pop-word{
		font-size: 40rpx;
		font-weight: bold;
	}
	.sc-btn {
		border: 2rpx solid #1E98D7;
		border-radius: 50rpx;
		color: #1E98D7;
	}
</style>